<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>STAT HUB - 应用列表</title>
    <link href="stylesheets/stat.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var name = get_param('name').name;
            if (name) {
                name = name.replace('#', '');
                $.get('/v1/app/' + name, function(app, status, xhr) {
                    show_app(app);
                });
            }
            
            $('#healthCheck').change(function(sel) {
                var show = parseInt(sel.target.value);
                if (show) {
                    $('#healthChecks').show();
                } else {
                    $('#healthChecks').hide();
                }
            });
            
            $('#resAlloc').change(function(sel) {
                var show = parseInt(sel.target.value);
                if (show) {
                    $('#resAllocs').show();
                } else {
                    $('#resAllocs').hide();
                }
            });
            
            $('#save').click(function() {
                save_app();
            });
        });
        
        function save_app() {
            var name = $('#name').val();
            var start = $('#start').val() == 'true';
            var toProcess = $('#toProcess').val();
            var workingDirectory = $('#workingDirectory').val();
            var killSignal = parseInt($('#killSignal').val());
            var ports = get_ports($('#ports').val());
            var args = get_list('args', 'arg');
            var uris = get_list('uris', 'uri');
            var envs = get_map('envs', 'envName', 'envValue');
            var resAlloc = get_res_alloc();
            var health_checks = get_health_checks();
            
            var app = {
                name: name,
                start: start,
                toProcess: toProcess,
                workingDirectory: workingDirectory,
                envs: envs,
                args: args,
                ports: ports,
                uris: uris,
                killSignal: killSignal,
                resAlloc: resAlloc,
                healthChecks: health_checks
            };
            var json = JSON.stringify(app);

            var method = $('#stat').val() == 'edit' ? 'PUT' : 'POST';
            var url = $('#stat').val() == 'edit' ? '/v1/app/' + app.name : '/v1/app';
            
            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: json,
                dataType: 'json',
                success: function(data, status, xhr) {
                    alert('已经保存');
                    window.location.href = '/';
                },
                error: function(xhr, status, error) {
                    alert('保存失败，状态：' + error + ', 信息: ' + xhr.responseJSON.message);
                }
            });
        }
        
        function get_res_alloc() {
            var show = $('#resAlloc').val();
            if (show == '1') {
                var cpus = $('#resAlloc_cpus').val();
                var mem = new Number($('#resAlloc_mem').val());
                var disk = new Number($('#resAlloc_disk').val());
                return {
                    cpus: cpus,
                    mem: mem * 1024 * 1024,
                    disk: disk * 1024 * 1024
                };
            } else {
                return null;
            }
        }
        
        function get_health_checks() {
            var r = new Array();
            var show = $('#healthCheck').val();
            if (show == '1') {
                var initialDelaySeconds = $('#healthCheck_initialDelaySeconds').val();
                var intervalSeconds = $('#healthCheck_intervalSeconds').val();
                var protocol = $('#healthCheck_protocol').val();
                var path = $('#healthCheck_path').val();
                var portIndex = $('#healthCheck_portIndex').val();
                var timeoutSeconds = $('#healthCheck_timeoutSeconds').val();
                var maxConsecutiveFailures = $('#healthCheck_maxConsecutiveFailures').val();
                
                r.push({
                    initialDelaySeconds: initialDelaySeconds,
                    intervalSeconds: intervalSeconds,
                    protocol: protocol,
                    path: path,
                    portIndex: portIndex,
                    timeoutSeconds: timeoutSeconds,
                    maxConsecutiveFailures: maxConsecutiveFailures
                });
            }
            return r;
        }
        
        function get_map(panelId, keyId, valueId) {
            var map = new Object();
            var keys = get_list(panelId, keyId);
            var values = get_list(panelId, valueId);
            if (keys) {
                for (var i=0; i<keys.length; i++) {
                    map[keys[i]] = values[i];
                }
            }
            return map;
        }
        
        function get_list(panelId, ctlId) {
            var list = $('#' + panelId + ' input[type="text"]');
            var r = new Array();
            for (var i=0; i<list.length; i++) {
                if (list[i].id == ctlId) {
                    r.push(list[i].value);
                }
            }
            return r;
        }
        
        function get_ports(s) {
            var p = new Array();
            if (s) {
                var ary = s.split(',');
                if (ary != null) {
                    for (var i=0; i<ary.length; i++) {
                        p.push(parseInt(ary[i]));
                    }
                }
            }
            return p;
        }
        
        function show_app(app) {
            //edit satatus
            $('#stat').val('edit');
            $('#name').attr("disabled","disabled")
            
            //display data
            $('#start').val(app.start);
            $('#name').val(app.name);
            $('#toProcess').val(app.toProcess);
            $('#workingDirectory').val(app.workingDirectory);
            if (app.args) {
                $.each(app.args, function(i, arg) {
                    add_arg(arg);
                });
            }
            if (app.envs) {
                $.each(app.envs, function(k, v) {
                    add_env(k, v);
                });
            }
            if (app.uris) {
                $.each(app.uris, function(i, uri) {
                    add_uri(uri);
                });
            }
            $('#killSignal').val(app.killSignal);
            $('#ports').val(app.ports);
            
            if (app.resAlloc) {
                show_res_alloc(app.resAlloc);
                $('#resAlloc').val('1');
                $('#resAllocs').show();
            } else {
                $('#resAlloc').val('0');
                $('#resAllocs').hide();
            }
            
            if (app.healthChecks && app.healthChecks.length > 0) {
                show_health_check(app.healthChecks[0]);
                $('#healthCheck').val('1');
                $('#healthChecks').show();
            } else {
                $('#healthCheck').val('0');
                $('#healthChecks').hide();
            }
        }
        
        function show_res_alloc(resAlloc) {
            $('#resAlloc_cpus').val(resAlloc.cpus);
            $('#resAlloc_mem').val(resAlloc.mem / 1024 / 1024);
            $('#resAlloc_disk').val(resAlloc.disk / 1024 / 1024);
        }
        
        function show_health_check(healthCheck) {
            $('#healthCheck_initialDelaySeconds').val(healthCheck.initialDelaySeconds);
            $('#healthCheck_intervalSeconds').val(healthCheck.intervalSeconds);
            $('#healthCheck_protocol').val(healthCheck.protocol);
            $('#healthCheck_path').val(healthCheck.path);
            $('#healthCheck_portIndex').val(healthCheck.portIndex);
            $('#healthCheck_timeoutSeconds').val(healthCheck.timeoutSeconds);
            $('#healthCheck_maxConsecutiveFailures').val(healthCheck.maxConsecutiveFailures);
        }
        
        function add_arg(val) {
            var max = 0;
            var es = $('#args').children();
            for (var i = 0; i < es.length; i ++) {
                var id = parseInt(es[i].id.split('_')[1]);
                if (id > max) {
                    max = id;
                }
            }
            var id = "arg_" + (max+1);
            var div = '<div id="' + id + '">'
            div += '<input type="text" name="arg" size="80" maxlength="200" value="' + val + '" id="arg"/>';
            div += '<a href="javascript:void(0)" onclick="remove(\'' + id + '\')"><img src="images/11-16.png" align="absmiddle"/></a>';
            div += '</div>';
            $('#args').append(div);
        }
        
        function add_env(name, val) {
            var max = 0;
            var es = $('#envs').children();
            for (var i = 0; i < es.length; i ++) {
                var id = parseInt(es[i].id.split('_')[1]);
                if (id > max) {
                    max = id;
                }
            }
            var id = "env_" + (max+1);
            var div = '<div id="' + id + '">';
            div += '<input type="text" name="envName" size="30" maxlength="200" value="' + name + '" id="envName"/>';
            div += ' = ';
            div += '<input type="text" name="envValue" size="40" maxlength="200" value="' + val + '" id="envValue"/>';
            div += '<a href="javascript:void(0)" onclick="remove(\'' + id + '\')"><img src="images/11-16.png" align="absmiddle"/></a>';
            div += '</div>';
            $('#envs').append(div);
        }
                                    
        function add_uri(val) {
            var max = 0;
            var es = $('#uris').children();
            for (var i = 0; i < es.length; i ++) {
                var id = parseInt(es[i].id.split('_')[1]);
                if (id > max) {
                    max = id;
                }
            }
            var id = "uri_" + (max+1);
            var div = '<div id="' + id + '">'
            div += '<input type="text" name="uri" size="80" maxlength="200" value="' + val + '" id="uri"/>';
            div += '<a href="javascript:void(0)" onclick="remove(\'' + id + '\')"><img src="images/11-16.png" align="absmiddle"/></a>';
            div += '</div>';
            $('#uris').append(div);
        }
        
        function remove(id) {
            $('#' + id).remove();
        }
    </script>
</head>
<body>
<div id="wrapper">

    <div id="header">
        <a href="/"><img src="images/stat.png" alt="Status" /></a>
    </div>

    <div id="content">
        <div class="hidden" id="statusmessage">&nbsp;</div>
        <p>请使用下面的表单新建/修改应用。</p>
        <form id="f" name="f" method="post">
            <input type="hidden" name="stat" value="add" id="stat"/>
            <input type="hidden" name="start" value="true" id="start"/>
            <div class="jive-contentBox">
                <table cellpadding="3" cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td width="1%" nowrap></td>
                            <td width="49%" nowrap>
                                <div>应用名称: *</div>
                                <div>
                                    <input type="text" name="name" size="80" maxlength="30" id="name"/>
                                    <span id="name_message" style="display:none"></span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>进程: *</div>
                                <div>
                                    <input type="text" name="toProcess" size="80" maxlength="200" id="toProcess"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td nowrap>
                                <div>工作目录:</div>
                                <div>
                                    <input type="text" name="workingDirectory" size="80" maxlength="200" id="workingDirectory"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>参数: <a href="javascript:void(0)" onclick="add_arg('')"><img src="images/add-16x16.gif" align="absmiddle"/></a></div>
                                <div id="args"></div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>环境变量: <a href="javascript:void(0)" onclick="add_env('', '')"><img src="images/add-16x16.gif" align="absmiddle"/></a></div>
                                <div id="envs"></div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>退出信号: *</div>
                                <div>
                                    <select name="killSignal" id="killSignal" style="width:430px">
                                        <option value="1"> 1 - HUP (hang up)</option>
                                        <option value="2"> 2 - INT (interrupt)</option>
                                        <option value="3"> 3 - QUIT (quit)</option>
                                        <option value="6"> 6 - ABRT (abort)</option>
                                        <option value="9"> 9 - KILL (non-catchable, non-ignorable kill)</option>
                                        <option value="14">14 - ALRM (alarm clock)</option>
                                        <option value="15" selected>15 - TERM (software termination signal)</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>端口:</div>
                                <div>
                                    <input type="text" name="ports" size="80" maxlength="200" value="0,0" id="ports"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td nowrap></td>
                            <td>
                                <div>下载地址: <a href="javascript:void(0)" onclick="add_uri('')"><img src="images/add-16x16.gif" align="absmiddle"/></a></div>
                                <div id="uris"></div>
                            </td>
                        </tr>
                        
                        <tr>
                            <td width="1%" nowrap></td>
                            <td width="49%" nowrap>
                                <div>分配资源:</div>
                                <div>
                                    <select name="resAlloc" id="resAlloc" style="width:430px">
                                        <option value="1">分配</option>
                                        <option value="0" selected>不分配</option>
                                    </select>
                                </div>
                                <div id="resAllocs" class="hidden">
                                    <div>CPU核数量:</div>
                                    <div>
                                        <input type="text" name="resAlloc_cpus" size="80" maxlength="30" value="0.1" id="resAlloc_cpus"/>
                                    </div>
                                    <div>内存（MB）:</div>
                                    <div>
                                        <input type="text" name="resAlloc_mem" size="80" maxlength="30" value="1024" id="resAlloc_mem"/>
                                    </div>
                                    <div>磁盘空间（MB）:</div>
                                    <div>
                                        <input type="text" name="resAlloc_disk" size="80" maxlength="30" value="1024" id="resAlloc_disk"/>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="1%" nowrap></td>
                            <td width="49%" nowrap>
                                <div>健康检查:</div>
                                <div>
                                    <select name="healthCheck" id="healthCheck" style="width:430px">
                                        <option value="1">开启</option>
                                        <option value="0" selected>关闭</option>
                                    </select>
                                </div>
                                <div id="healthChecks" class="hidden">
                                    <div>初始延时（秒）:</div>
                                    <div>
                                        <input type="text" name="healthCheck_initialDelaySeconds" size="80" maxlength="30" value="60" id="healthCheck_initialDelaySeconds"/>
                                    </div>
                                    <div>检查间隔（秒）:</div>
                                    <div>
                                        <input type="text" name="healthCheck_intervalSeconds" size="80" maxlength="30" value="20" id="healthCheck_intervalSeconds"/>
                                    </div>
                                    <div>协议:</div>
                                    <div>
	                                    <select name="healthCheck_protocol" id="healthCheck_protocol" style="width:430px">
	                                        <option value="HTTP">HTTP</option>
	                                        <option value="HTTPS">HTTPS</option>
	                                    </select>
                                    </div>
                                    <div>访问路径:</div>
                                    <div>
                                        <input type="text" name="healthCheck_path" size="80" maxlength="30" value="/" id="healthCheck_path"/>
                                    </div>
                                    <div>端口序号:</div>
                                    <div>
                                        <input type="text" name="healthCheck_portIndex" size="80" maxlength="30" value="0" id="healthCheck_portIndex"/>
                                    </div>
                                    <div>超时（秒）:</div>
                                    <div>
                                        <input type="text" name="healthCheck_timeoutSeconds" size="80" maxlength="30" value="20" id="healthCheck_timeoutSeconds"/>
                                    </div>
                                    <div>允许的连续失败次数:</div>
                                    <div>
                                        <input type="text" name="healthCheck_maxConsecutiveFailures" size="80" maxlength="30" value="3" id="healthCheck_maxConsecutiveFailures"/>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-top: 10px;">
                                <input type="button" name="save" id="save" value=" 保存 ">
                            </td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </form>
    </div>
    <br/>
    <div class="push">
    </div>
</div>

<div id="footer" class="clr">
    <div class="left">
        <a href="/">STAT HUB</a> <span id="supervisor_version">#</span>
    </div>
    <div class="right">
        &amp;copy; 2006-<span id="copyright_date">#</span> <strong>lane.cn@gmail.com</strong>
    </div>
</div>
</body>
</html>
